<template>
	<view>
		<view class="content" v-if="!dataList || dataList.length < 1">
			<u-empty text="所谓伊喵，精神焕发" mode="list"></u-empty>
		</view>
		<view v-else>
			<view v-for="(data,index) in dataList" :key="data.id">
				<u-card :title="data.nickName" :sub-title="formatTime(data.createTime,'{y}-{m}-{d}')"
					:thumb=" data.avatar" border="false" margin="10rpx 5rpx" padding="20">
					<view slot="body" @click="toggleShowMore(data)">
						<view class="u-body-item  u-border-bottom u-col-between u-p-t-0">
							<view class="u-body-item-title u-line-2">
								<p>
									{{ data.content && (data.content.length >= 30 ? (data.content.substring(0, 30) + '...') : data.content.substring(0, 30)) }}
									<template>
										<span v-if="isLong(data.content)" @click="toggleShowMore(data)"
											style="color: cornflowerblue;">
											查看更多
										</span>
									</template>
								</p>
							</view>
							<view style="display: flex; flex-wrap: wrap;margin-top: 10%;">
								<view v-if="data.type == 1">
									<video style="width: 500rpx;height: 350rpx;" :src="data.sysFileInfos[0].fileUrl"
										:controls="false" :autoplay="true" :loop="true" :muted="true"
										catchtap="handleVideoTap">
									</video>
								</view>
								<view style="width: 32.3%; margin: 0% 1% 1% 0%"
									v-for="(image, fileIndex) in data.sysFileInfos" :key="image.id"
									@tap.stop="seeme(data.sysFileInfos, fileIndex)" v-else>
									<u-image :src="image.fileUrl" mode="aspectFill" width="100%" height="220rpx"
										:lazy-load="true">
										<u-loading slot="loading"></u-loading>
									</u-image>
								</view>
							</view>
						</view>
						<view style="display: flex;align-items: center;margin-top: 2.5%"
							v-if="data.likeList.length > 0">
							<view style="margin-right: 10rpx;">
								<u-icon name='heart-fill' size="34"></u-icon>
							</view>
							<text>{{data.likeList}}</text>
						</view>
					</view>
					<view slot="foot" style="display: flex;">
						<view style="width: 85%;">
							<u-icon name="map-fill" size="34" color="" :label="data.locationInfo"
								v-if="data.locationInfo"></u-icon>
						</view>
						<view style="display: flex;justify-content: space-between;width: 15%;">
							<u-icon :name="data.isLike ? 'heart-fill' : 'heart'" size="34" @click="like(data)"></u-icon>
							<u-icon name='more-circle' size="34" @click="openSetting(data)"></u-icon>
						</view>
					</view>
				</u-card>
			</view>
			<u-loadmore status="nomore" />
		</view>
		<u-toast ref="uToast" />
	</view>
	</scroll-view>
</template>

<script>
	import {
		addDailyLike,
		getDailyList,
		getDailyLikeList
	} from '@/api/bot/daily'
	import config from '@/config'
	export default {
		props: ['query'],
		data() {
			return {
				userId: this.$store.getters.userId,
				nickName: this.$store.getters.nickName,
				baseUrl: config.baseUrl,
				dataList: [],
				maxContentLength: 30,
				list: [{
					text: '点赞',
					color: '#19be6b',
					subText: '汉堡也为您点赞！'
				}, {
					text: '评论',
					subText: '汉堡提醒您，善言结善缘！'
				}],
				show: false
			}
		},
		mounted() {
			this.getDailyList()
		},
		computed: {},
		watch: {
			query(newValue) {
				console.log(newValue);
				if (newValue.pageNum == 1) {
					this.dataList = []
				}
				this.getDailyList()
			}
		},
		methods: {
			handleVideoTap(event) {
				// 处理视频点击事件
				console.log('Video tapped!', event);
			},
			// 日常功能：点赞
			like(obj) {
				if (obj.isLike) {
					obj.isLike = false
				} else {
					obj.isLike = true
				}
				uni.getStorage({
					key: 'groupIdByIndex',
					success: (res) => {
						let data = JSON.parse(res.data);
						let groupId = data.id;
						let formData = {
							refDailyId: obj.id,
							publishUserId: obj.userId,
							groupId: groupId
						}
						addDailyLike(formData).then(res => {
							if (res.code == 200) {
								console.log("点赞成功")
							} else {
								console.log("点赞失败")
							}
							getDailyLikeList(formData).then(res => {
								obj.likeList = res.rows.map(item => item.nickName).join(',')
							})
						})
					}
				})
			},
			getDailyList() {
				uni.showLoading({
					title: "加载中..."
				})
				uni.getStorage({
					key: 'groupIdByIndex',
					success: (res) => {
						let data = JSON.parse(res.data);
						let groupId = data.id;
						let query = {
							...this.query,
							groupId: groupId
						}
						this.getList(query)
					}
				});
			},
			getList(query) {
				getDailyList(query).then(res => {
					const processedList = res.rows.map(element => {
						element.createTime = new Date(element.createTime).getTime()
						element.avatar = this.baseUrl + element.avatar;
						element.likeList = element.botDailyLikes.map(item => item.nickName).join(',')
						element.isLike = element.botDailyLikes.length > 0 ? element
							.botDailyLikes.some(
								item => item.userId == this.$store.getters.userId) : false;
						return element;
					});
					this.dataList = this.dataList.concat(processedList);
					uni.hideLoading()
				})
			},
			seeme(obj, index) {
				let formData = {
					sysfileInfo: obj,
					currentImages: index
				}
				this.$emit('openImage', formData)
			},
			toggleShowMore(data) {
				data.path = 'index'
				const formDataStr = JSON.stringify(data);
				this.$tab.navigateTo('/pages/detail/dailyDetail?data=' + encodeURIComponent(formDataStr))
			},
			isLong(obj) {
				if (obj && obj.length > this.maxContentLength) {
					return true;
				} else {
					return false;
				}
			},
			openSetting(obj) {
				let formData = {
					actionObj: obj
				}
				this.$emit('openImage', formData)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.content {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10%;
		height: 100%;
	}
</style>